<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>
        <style type="text/css" >

            .header{
                background-color: #DD0000;
                height:40px;
                width:100%;

                display:flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;/*交叉轴对齐方式*/


                position:fixed;/*固定定位*/
                top:0px;
                left:0px;
                
            }

            .search{
                position: relative;/*相对于自身原本位置的定位*/
                width:60%;
               
            }

            .search>input{
                box-sizing:border-box;
                width:100%;
                height:28px;
                border:none;/*去掉边框*/
                outline: none;/*去掉轮廓*/
                border-radius: 15px;
                padding:0 10px 0 35px;/*上右下左*/

                font-size:20px;
                color:#888888;
                opacity:1 ;/*透明度*/
            }

            #search-img{
                width:20px;

                position:absolute;/*相对于设定了定位的父元素的定位*/
                top:4px;
                left:10px;
            }

            .footer{
                position:fixed;
                bottom:0;
                left:0;
                width:100%;
                height:50px;
                background-color: #FCFCFC;

                border-top:1px solid #E0E0E0;

                display:flex;
                flex-direction: row;
                justify-content: center;
                flex-shrink: 1;
                flex-grow: 1;

            }

            .footer>label:not(:nth-last-child(1)){
                /*border-right:1px solid #EEEEEE;*/
            }

            .footer>label{
                box-sizing: border-box;
                
                width:20%;
                padding:5px 0 5px 0;               

                display: flex;
                flex-direction: column;
                justify-content:space-between ;
                align-items: center;

                font-size:10px;

            }

            .footer>label>img{
                height:50%;
            }

            .main{
                position: fixed;
                left:0;
                top:40px;
                bottom:50px;
                right:0;
                
            }

           

            .myshow+div{
               
               width:0;
               height:0;
               opacity:0;
               transform: rotate(0deg);

               overflow: hidden;

               transition: width 0.1s,height 0.1s,opacity 0.5s,transform 0.1s;

            }

            .myshow:checked+div{
              width:100%;
              height:100%;
              opacity:1;
              transform: rotate(1440deg);
              overflow: auto;
             
            }
        
        </style>
    </head>
    <body>
        <div class="header">
            <div class="search">
                <input />
                <img id="search-img" src="images/search.jpg"/>
            </div>

            <img src="images/search.jpg" style="height:60%;margin-left:2%;"/>

        </div>

        <div class="main">

            <input class="myshow" id="home" type="radio" name="myradio" style="display:none;" checked >
            <div style="background-color: bisque;">home</div>
           
            <input class="myshow" id="fenlei" type="radio" name="myradio" style="display:none;">
            <div style="background-color:rgb(223, 199, 199);">
                fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/> fenlei<br/>
                
            </div>            
            
            <input class="myshow"  id="found" type="radio" name="myradio" style="display:none;">
            <div style="background-color:aqua" >found</div>
            
            <input class="myshow"  id="cart" type="radio" name="myradio" style="display:none;">
            <div style="background-color:mediumaquamarine;">cart</div>
            
            <input class="myshow"  id="mine" type="radio" name="myradio" style="display:none;">
            <div style="background-color:violet;">mine</div>


        </div>

        <div class="footer">

            <label for="home">                
                <img src="images/home.png">
                首页
            </label>

            <label for="fenlei">
                <img src="images/class.png">
                分类
            </label>

            <label for="found">
                <img src="images/find.png">
                发现
            </label>

            <label for="cart">
                <img src="images/cart.png">
                购物车
            </label>

            <label for="mine">
                <img src="images/mine.png">
                我的
            </label>

        </div>

    </body>

</html>